<template>
  <div 
    class="custom-scroll-container"
    @mouseenter="showScrollbar = true"
    @mouseleave="showScrollbar = false"
  >
    <div 
      ref="scrollContent"
      class="scroll-content"
      @scroll="handleScroll"
    >
      <slot></slot>
    </div>
    
    <!-- 自定义滚动条 -->
    <div 
      v-if="needsScrollbar && showScrollbar"
      class="custom-scrollbar"
      :style="{ height: containerHeight + 'px' }"
    >
      <div 
        class="scrollbar-thumb"
        :style="{ 
          height: thumbHeight + 'px',
          top: thumbPosition + 'px'
        }"
        @mousedown="startDrag"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomScrollbar',
  data() {
    return {
      showScrollbar: false,
      needsScrollbar: false,
      containerHeight: 0,
      thumbHeight: 0,
      thumbPosition: 0,
      isDragging: false,
      dragStartY: 0,
      dragStartTop: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.updateScrollbar()
      window.addEventListener('resize', this.updateScrollbar)
      document.addEventListener('mousemove', this.handleMouseMove)
      document.addEventListener('mouseup', this.handleMouseUp)
      
      // 监听内容变化
      if (this.$refs.scrollContent) {
        const observer = new MutationObserver(() => {
          this.$nextTick(() => {
            this.updateScrollbar()
          })
        })
        observer.observe(this.$refs.scrollContent, {
          childList: true,
          subtree: true,
          attributes: true
        })
        this.observer = observer
      }
    })
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.updateScrollbar)
    document.removeEventListener('mousemove', this.handleMouseMove)
    document.removeEventListener('mouseup', this.handleMouseUp)
    if (this.observer) {
      this.observer.disconnect()
    }
  },
  methods: {
    updateScrollbar() {
      if (!this.$refs.scrollContent) return
      
      const container = this.$refs.scrollContent
      const containerHeight = container.clientHeight
      const contentHeight = container.scrollHeight
      
      this.containerHeight = containerHeight
      this.needsScrollbar = contentHeight > containerHeight
      
      if (this.needsScrollbar) {
        this.thumbHeight = Math.max(20, (containerHeight / contentHeight) * containerHeight)
        this.updateThumbPosition()
      }
    },
    updateThumbPosition() {
      if (!this.$refs.scrollContent || !this.needsScrollbar) return
      
      const container = this.$refs.scrollContent
      const scrollPercentage = container.scrollTop / (container.scrollHeight - container.clientHeight)
      this.thumbPosition = scrollPercentage * (this.containerHeight - this.thumbHeight)
    },
    handleScroll() {
      this.updateThumbPosition()
    },
    startDrag(event) {
      event.preventDefault()
      this.isDragging = true
      this.dragStartY = event.clientY
      this.dragStartTop = this.thumbPosition
    },
    handleMouseMove(event) {
      if (!this.isDragging || !this.$refs.scrollContent) return
      
      const deltaY = event.clientY - this.dragStartY
      const newTop = Math.max(0, Math.min(this.containerHeight - this.thumbHeight, this.dragStartTop + deltaY))
      
      const scrollPercentage = newTop / (this.containerHeight - this.thumbHeight)
      const newScrollTop = scrollPercentage * (this.$refs.scrollContent.scrollHeight - this.$refs.scrollContent.clientHeight)
      
      this.$refs.scrollContent.scrollTop = newScrollTop
    },
    handleMouseUp() {
      this.isDragging = false
    }
  }
}
</script>

<style scoped>
.custom-scroll-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.scroll-content {
  height: 100%;
  overflow-y: scroll;
  padding: 24px;
  padding-right: 36px;
  margin-right: -12px;
  /* 隐藏默认滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-content::-webkit-scrollbar {
  display: none;
}

/* 自定义滚动条 */
.custom-scrollbar {
  position: absolute;
  right: 4px;
  top: 0;
  width: 12px;
  background: transparent;
  border-radius: 6px;
}

.scrollbar-thumb {
  position: absolute;
  right: 0;
  width: 12px;
  background: #404040;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.scrollbar-thumb:hover {
  background: #606060;
}
</style> 